<template>
  <div>
    <BaseCharts
      title="测试图表"
      :options="options"
      width="400px"
      height="400px"
    ></BaseCharts>
  </div>
</template>

<script setup lang="ts">
import BaseCharts from "@/componentvues/chart/BaseCharts.vue";
import { ref, computed, onMounted } from "vue";
const rankingData = [
  { name: "赵四", value: 700 },
  { name: "关二", value: 130 },
  { name: "刘大", value: 100 },
  { name: "诸五", value: 80 },
  { name: "张三", value: 30 },
];
const options = ref(
  computed(() => {
    // debugger;
    return {
      title: {
        text: "1111",
      },
      dataset: {
        source: rankingData.map((item) => {
          return [item.value, item.name];
        }),
      },
      grid: { containLabel: true },
      xAxis: {
        name: "",
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: "category",
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          type: "bar",
          encode: {},
          label: {
            normal: {
              position: "right",
              show: true,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
      ],
    };
  })
);

onMounted(() => {
  // debugger;
  console.log("-----11111");
});
</script>

<style></style>
